<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table {
      border: 1px solid #e9e9e9;
      margin: 200px auto auto;
      border-collapse: collapse;
      border-spacing: 0;
    }

    th,td{
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }

    h2{
      text-align: center;
    }
  </style>
</head>
<body>
<div id="app">
  <table border="1">
    <thead>
    <tr>
      <th></th>
      <th>书名</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in list">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
      <td>{{item.price | showPrice(item.price)}}</td>
      <td>
        <button :disabled="item.count <= 1" @click="dec(index)">-</button>
        {{item.count}}
        <button @click="inc(index)">+</button>
      </td>
      <td>
        <button @click="remove(index)">移除</button>
      </td>
    </tr>
    </tbody>
  </table>
  <h2 v-if="totalPrice != 0">{{totalPrice | showPrice(totalPrice)}}</h2>
  <h2 v-else></h2>
</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      list: [
        {
          id: 1,
          name: '《算法导论》',
          date: '2006-9',
          price: 85.00,
          count: 1
        },
        {
          id: 2,
          name: '《UNIX编程艺术》',
          date: '2006-2',
          price: 59.00,
          count: 1
        },
        {
          id: 3,
          name: '《编程珠玑》',
          date: '2008-10',
          price: 39.00,
          count: 1
        },
        {
          id: 4,
          name: '《代码大全》',
          date: '2006-3',
          price: 128.00,
          count: 1
        },
      ]
    },
    computed: {
      totalPrice() {
        var totalPrice = 0;
        for (let book of this.list) {
          totalPrice += book.price * book.count;
        }
        return totalPrice;
      }
    },
    methods: {
      inc(index) {
        this.list[index].count++;
      },
      dec(index) {
        this.list[index].count--;
      },
      remove(index) {
        this.list.splice(index, 1);
      }
    },
    filters: {
      showPrice(price) {
        return '￥' + price.toFixed(2);
      }
    }
  })
</script>
</body>
</html>